<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="jquery3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                // alert("button click")
                $.ajax({
                    type: "post",
                    url: "returnVoidAjax.do",
                    data: {
                        name: "zkx",
                        age: 20
                    },
                    // dataType: "json",  //此时可以不加，因为控制器中response.setContentType("application/json;charset=utf-8");
                    success: function (resp) {
                        alert(resp.name + " " + resp.age);
                    }
                });
            });
        });
        $(function () {
            $("#btn2").click(function () {
                // alert("button click")
                $.ajax({
                    type: "post",
                    url: "returnStudentJson.do",
                    data: {
                        name: "zkx",
                        age: 20
                    },
                    // dataType: "json",  //此时可以不加，因为控制器中response.setContentType("application/json;charset=utf-8");
                    success: function (resp) {
                        alert(resp.name + " " + resp.age);
                    }
                });
            });
        });
        $(function () {
            $("#btn3").click(function () {
                // alert("button click")
                $.ajax({
                    type: "post",
                    url: "returnStudentJsonArray.do",
                    data: {
                        name: "zkx",
                        age: 20
                    },
                    // dataType: "json",  //此时可以不加，因为控制器中response.setContentType("application/json;charset=utf-8");
                    success: function (resp) {
                        //[{"name":"zhangsan","age":12},{"name":"lisi","age":13}]
                        // alert(resp.name + " " + resp.age);
                        $.each(resp, function (i, n) {    //i代表循环变量，n代表数组中的对象
                            alert(n.name + " " + n.age)
                        })
                    }
                });
            });
        });
        $(function () {
            $("#btn4").click(function () {
                $.ajax({
                    type: "post",
                    url: "returnStringData.do",
                    data: {
                        name: "zkx",
                        age: 20
                    },
                    dataType: "text",  //此时dataType以文本显示    text/plain;charset=ISO-8859-1
                    success: function (resp) {
                        alert("返回的文本数据：" + resp)
                    }
                });
            });
        });
    </script>
</head>
<body>
<p>处理器方法返回String表示视图名称</p>
<form action="returnStringView.do" method="post">
    姓名：<input type="text" name="name"><br>
    年龄：<input type="text" name="age"><br>
    <input type="submit" value="returnStringView">
</form>
<hr>
<p>处理器方法返回String表示视图完整路径</p>
<form action="returnStringView2.do" method="post">
    姓名：<input type="text" name="name"><br>
    年龄：<input type="text" name="age"><br>
    <input type="submit" value="returnStringView2">
</form>
<br><br>
<button id="btn">发起ajax请求</button>
<button id="btn2">returnStudentJson.do发起ajax请求</button>
<button id="btn3">returnStudentJsonArray.do发起ajax请求</button>
<button id="btn4">returnStringData.do发起ajax请求</button>
</body>
</html>
